<template>
  <div id="balance_recharge">
    <c-title :hide="false" :text="`${fun.initWithdrawal()}`"></c-title>
    <diyBackGround :minHeight="minHeight"></diyBackGround>
    <div class="main">
      <div  v-if="!supplier && !priceDifferencePool" class="txt">可{{`${fun.initWithdrawal()}${balanceLang}`}}：{{ balance }}元</div>
      <div  v-if="!supplier && priceDifferencePool" class="txt">可{{`${fun.initWithdrawal()}金额`}}：{{ balance }}元</div>

      <div class="detailBox" :class="supplier ? 'detailBoxSupplier' : ''">
        <div class="txt" v-if="this.$route.name == 'Ycc_withdrawals'">{{fun.initWithdrawal()}}金额</div>
        <div v-else-if="!priceDifferencePool" :class="{'supplier-box':supplier}">
          <div class="txt">可{{fun.initWithdrawal()}}金额</div>
          <div v-if="supplier" class="supplier-box-tips">手续费比例：{{service_money}}<em v-if="service_type == 1">%</em></div>
        </div>
        <div class="txt" v-else-if="priceDifferencePool">可{{fun.initWithdrawal()}}金额</div>
        <div class="priceBox" v-if="!supplier">
          <div class="image" v-if="!priceDifferencePool">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/balance/zuanshi@2x.png" alt="" />
          </div>
          <input type="number" v-model="info_form.balance_money" placeholder="0.00" />
          <div class="txt" @click="all">全部{{ fun.initWithdrawal() }}</div>
        </div>
        <div class="isnone" v-else>
          <span>{{ $i18n.t('money') }}</span>
          <span style="font-size: 1.25rem;">{{ balance }}</span>
        </div>
        <div class="tips"  v-if="!supplier">{{ poundage }}</div>
        <div class="deduct" v-if="info.deduct_data && info.deduct_data.status == 1 && info_form.balance_money">
          扣除{{fun.getIntegralLang()}}：{{ countDeduct }}
        </div>
      </div>
      <div class="payTypeBox recharge_way">
        <div class="title">
          <div class="line"  v-if="!supplier"></div>
          {{fun.initWithdrawal()}}到
        </div>
        <ul class="choose_box" v-if="priceDifferencePool">
          <template v-for="(btn,index) in priceDifferencePool_buttons.buttons">
            <li @click="confirm(btn.value)" :key="index">
              <i class="iconfont" :class="[btnclass_difference(btn.value)]"></i>
              {{btn.name}}
            </li>
          </template>
        </ul>
        <ul class="choose_box" v-if="!priceDifferencePool">
          <li v-if="this.$route.name == 'Ycc_withdrawals'" @click="yccWithdrawals"><i class="iconfont icon-balance_e"></i>{{ this.fun.initWithdrawal() }}到收入</li>
          <li v-if="withdrawToWechat" @click="confirm('1')"><i class="iconfont icon-balance_i"></i>微信</li>
          <li v-if="withdrawToAlipay" @click="confirm('2')"><i class="iconfont icon-balance_j"></i>支付宝</li>
          <li v-if="withdrawToManual" @click="confirm('3')"><i class="iconfont icon-balance_e"></i>{{ manual_name }}</li>
          <li v-if="eupshow" @click="confirm('4')"><i class="iconfont icon-balance_g"></i>EUP提出</li>
          <li v-if="hxShow" @click="confirm('5')"><i class="iconfont icon-balance_f"></i>银行卡</li>
          <li v-if="converge_pay" @click="confirm('6')"><i class="iconfont icon-balance_h"></i>{{ fun.initWithdrawal() }}到银行卡-HJ</li>
          <li v-if="worker_withdraw_wechat" @click="confirm('10', 'wechat_is_register')"><i class="iconfont icon-balance_i"></i>{{fun.initWithdrawal()}}到微信-好灵工</li>
          <li v-if="worker_withdraw_alipay" @click="confirm('11', 'bank_is_register')"><i class="iconfont icon-balance_j"></i>{{fun.initWithdrawal()}}到支付宝-好灵工</li>
          <li v-if="worker_withdraw_bank" @click="confirm('12', 'bank_is_register')"><i class="iconfont icon-balance_f"></i>{{fun.initWithdrawal()}}到银行卡-好灵工</li>
          <li @click="towithdrawal(index)" v-for="(type, index) of withdrawType" :key="index">
            <i class="iconfont" :class="type == `汇聚${fun.initWithdrawal()}` ? 'iconfont icon-balance_h' : [btnclass(index)]"></i>{{ type }}
          </li>
          <li v-if="info.high_light_wechat" @click="confirm('7')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到微信-{{ highLightName }}</li>
          <li v-if="info.high_light_alipay" @click="confirm('8')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到支付宝-{{ highLightName }}</li>
          <li v-if="info.high_light_bank" @click="confirm('9')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到银行卡-{{ highLightName }}</li>
          <li v-if="eplus_withdraw_bank" @click="confirm('13')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到银行卡-智E+</li>
          <li v-if="silver_point" @click="confirm('14')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到银典支付</li>
          <li v-if="support_center_withdraw" @click="confirm('15')"><i class="iconfont icon-icon_heart2"></i>{{fun.initWithdrawal()}}到{{support_center_withdraw_name}}核销</li>
          <li v-if="jianzhimao_bank" @click="confirm('16')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到银行卡-兼职猫</li>
          <li v-if="tax_withdraw_bank" @click="confirm('17')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到银行卡-{{withdraw_diy_name.tax_withdraw_bank}}</li>
          <li v-if="consol_withdraw_bank" @click="confirm('18')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到银行卡-汇聚代发薪</li>
          <li v-if="consol_withdraw_alipay" @click="confirm('19')"><i class="iconfont icon-balance_j"></i>{{fun.initWithdrawal()}}到支付宝-汇聚代发薪</li>
          <li v-if="consol_withdraw_wechat" @click="confirm('20')"><i class="iconfont icon-balance_i"></i>{{fun.initWithdrawal()}}到微信-汇聚代发薪</li>
          <li v-if="huiis_bank" @click="confirm('21')"><i class="iconfont icon-yinhangka-yunhuisuan"></i>{{fun.initWithdrawal()}}到银行卡-云汇算</li>
          <li v-if="huiis_ali" @click="confirm('23')"><i class="iconfont icon-zhifubao-yunhuisuan"></i>{{fun.initWithdrawal()}}到支付宝-云汇算</li>
          <li v-if="huiis_wx" @click="confirm('22')"><i class="iconfont icon-weixin-yunhuisuan"></i>{{fun.initWithdrawal()}}到微信-云汇算</li>
          <li v-if="gong_mall_withdraw_ali" @click="confirm('24')"><i class="iconfont icon-balance_j"></i>{{fun.initWithdrawal()}}到支付宝-工猫</li>
          <li v-if="gong_mall_withdraw_bank" @click="confirm('25')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到银行卡-工猫</li>
          <li v-if="integration_pay_share_huifu_withdraw_bank" @click="confirm('26')"><i class="iconfont icon-balance_g"></i>{{fun.initWithdrawal()}}到汇付</li>
        </ul>
        <div class="tips" v-if="withdraw_income_percent">提现到收入比例为{{withdraw_income_percent}}%</div>
      </div>
    </div>
    <van-popup v-model="support_code" :style="{ width: '15.63rem' }" style="background: transparent;">
      <div class="close">
        <i @click="support_code = false" class="iconfont icon-adsystem_icon_cancle"></i>
      </div>
      <div class="supportCode">
        <div class="supportCodeBox">
          <img :src="support_code_url" alt="">
        </div>
        <div class="txt">请{{support_center_withdraw_name}}扫码</div>
      </div>
    </van-popup>
    <pay-keyboard :payKeyboardShow.sync="payKeyboardShow" @complete="payComplete"></pay-keyboard>
    <!-- 提现到银行卡弹窗 -->
    <van-popup v-model="show" round closeable position="bottom" :style="{ height: '75vh' }">
      <eplusWithdraw :list="list" @confirm="onConfirm" :poundageHj="poundageHj" :actual_amount="actual_amount" :cost_money='cost_money'></eplusWithdraw>
    </van-popup>
    <van-popup v-model="popupVisible" style="width: 72%; border-radius: 0.375rem;">
      <form :action="action" method="post" style="width: 100%; height: 100%;">
        <h1 style="font-size: 16px; color: #333; padding: 1.25rem 0; line-height: 2.25rem; font-weight: normal; border-bottom: solid 0.0625rem #ebebeb;">
          {{ notice }}
        </h1>
        <input type="text" name="ipsRequest" :value="msg" style="display: none; margin-top: 0.625rem;" />
        <input type="submit" value="确认" style="width: 100%; height: 2.5rem; line-height: 2.5rem; font-size: 16px; color: #26a2ff; border: none;" />
      </form>
    </van-popup>
    <!-- 提现银行卡 -->
    <van-popup v-model="show2" position="bottom" :style="{ height: '55%' }">
      <div class="withdrawal_box">
        <i class="fa fa-angle-left" style="display: inline-block; text-align: left; font-size: 24px; float: left; line-height: 2.875rem; height: 2.875rem; padding-left: 10px;" @click="backTap"></i>
        <h2 style="display: inline-block;">{{fun.initWithdrawal()}}</h2>

        <div class="recharge_way">
          <div style="display: flex; align-items: center; justify-content: space-between; padding: 20px 10px; border-bottom: 1px solid #fafafa;" @click="gotoList">
            <h2 style="text-align: left;">银行卡：{{ checkObj.bankName }}</h2>

            <i class="fa fa-angle-right" style="font-size: 24px;"></i>
          </div>

          <ul class="choose_box" style="margin: 0 20px;">
            <li style="display: flex; justify-content: space-between; padding: 3px 0; margin-left: 0;">
              <span>{{fun.initWithdrawal()}}金额(元)</span>
              <span>{{ cost_money }}</span>
            </li>
            <li style="display: flex; justify-content: space-between; padding: 3px 0; margin-left: 0;">
              <span>{{ poundage_name }}(元)</span>
              <span>{{ poundageHj }}</span>
            </li>
            <li style="display: flex; justify-content: space-between; padding: 3px 0; margin-left: 0;">
              <span>实际到账(元)</span>
              <span>{{ actual_amount }}</span>
            </li>
          </ul>
        </div>
        <button v-if="!supplier" type="button" class="btn custom_color" @click="withGotiem">确认{{fun.initWithdrawal()}}</button>
        <button v-if="supplier" type="button" class="btn custom_color" @click="suppierGotiem">确认{{fun.initWithdrawal()}}</button>
      </div>
    </van-popup>
    <!-- 银行卡列表 -->
    <van-popup v-model="show3" position="bottom" :style="{ height: '55%' }">
      <div class="withdrawal_box">
        <i
          class="fa fa-angle-left"
          style="display: inline-block; text-align: left; font-size: 24px; float: left; line-height: 2.875rem; height: 2.875rem; padding-left: 10px;"
          @click="show3 = false"
        ></i>
        <h2 style="display: inline-block; line-height: 2.875rem; height: 2.875rem;">银行卡列表</h2>
        <i class="iconfont icon-close11" style="display: inline-block; float: right; line-height: 2.875rem; height: 2.875rem; padding-right: 10px;" @click="show3 = false"></i>
        <div class="recharge_way">
          <ul class="choose_box" style="padding-bottom: 0.625rem;">
            <li
              v-for="item in withList"
              :key="item"
              @click="checkOut(item)"
              style="padding-bottom: 10px; padding-right: 0; margin: 5px; border-bottom: 1px solid #fafafa; display: flex; align-items: center; justify-content: flex-end;"
            >
              <div style="flex: 1; width: 50%; text-align: left;">
                <!-- <span><i class="iconfont icon-wode-wode"></i></span> -->
                <span>{{ item.bankName }}</span>
              </div>
              <div style="flex: 0 0 32px; display: flex; justify-content: center;">
                <van-checkbox style="position: relative;" v-model="item.check" checked-color="#f45054"></van-checkbox>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </van-popup>
    <jianzhimaoPopup @closePopup='closePopupJZM' :payType="popupType" :bank_card_status="bank_card_status" :show="jianzhimao_bank_show" :set_verify="set_verify"></jianzhimaoPopup>
  </div>
</template>

<script>
import member_balance_withdrawals from "./member_balance_withdrawalscontroller_v2";

export default member_balance_withdrawals;
</script>
<style lang="scss" scoped>
.tips{
  text-align: left;
  font-size: 0.63rem;
  color: #666666;
}
.main {
  padding: 0 0.625rem;
  margin-top: -6.5313rem;

  .txt {
    text-align: left;
    // margin-top: 0.625rem;
    font-size: 0.875rem;
  }

  .payTypeBox {
    background: #fff;
    border-radius: 0.3125rem;
    margin-top: 0.625rem;
    padding: 0.9375rem;

    .title {
      display: flex;
      font-size: 0.9375rem;
      color: var(--themeBaseColor);
      line-height: 0.875rem;
      font-weight: bold;
      margin-bottom: .5rem;

      .line {
        width: 0.125rem;
        height: 0.875rem;
        background: var(--themeBaseColor);
        border-radius: 0.0625rem;
        margin-right: 0.4688rem;
      }
    }
  }

  .detailBoxSupplier {
    padding-bottom: 0 !important;
  }
  .supplier-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .supplier-box-tips{
    color: #6E6E79;
    font-size: 0.75rem;
  }
  .detailBox {
    padding: 1.0938rem 0.75rem;
    margin-top: 0.9375rem;
    box-shadow: 0 2px 8px 0 rgba(7, 11, 33, 0.11);
    border-radius: 0.5rem;
    background: #fff;

    .tips {
      font-size: 0.7188rem;
      font-weight: 400;
      color: #888;
      text-align: left;
      margin-top: 24px;
    }
    .deduct{
      text-align: left;
      color: #FA8647;
    }

    .isnone {
      border-bottom: none !important;
      display: flex;
      align-items: baseline;
      font-weight: bold;
      font-size: 0.75rem;
      color: #00001C;
      margin-top: 0.8125rem;
      padding-bottom: 0.9688rem;
    }

    .priceBox {
      display: flex;
      align-items: center;
      margin-top: 1.8125rem;
      padding-bottom: 0.9688rem;
      border-bottom: 1px solid #f5f2f5;

      em {
        font-size: 0.75rem;
        font-weight: 400;
        color: #f15353;
      }

      .txt {
        font-size: 0.75rem;
        color: #f15353;
        font-weight: 400;
      }

      .image {
        width: 1.3438rem;
        height: 1.3438rem;
        margin-right: 1.3438rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      input {
        margin-left: 0.375rem;
        line-height: 2rem;
        color: #333;
        width: 90%;
        font-size: 1.5938rem;
        border: none;
        flex: 1;
      }
    }

    .txt {
      font-size: 0.8438rem;
      text-align: left;
    }
  }
}

.recharge_way {
  background: #fff;
  margin-top: 0.625rem;

  h1 {
    line-height: 2.5rem;
    text-align: left;
    padding: 0 0.875rem;
    font-size: 16px;
  }

  li {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 3rem;
    font-size: 16px;
    // margin-left: 1.25rem;
    // padding-right: 1.25rem;
    // border-bottom: solid 0.0625rem #ebebeb;

    .iconfont_bg {
      background: #f15353;
      width: 2.25rem;
      height: 1.5rem;
      border-radius: 0.1875rem;
      display: flex;
      align-items: center;
      margin-right: 0.625rem;
    }

    .icon-balance_d {
      color: #00908c;
    }

    .icon-balance_e {
      color: #64b42e;
    }

    .icon-balance_f {
      color: #fac337;
    }

    .icon-balance_g,.icon-yinhangka-yunhuisuan {
      color: #00508e;
    }

    .icon-balance_h {
      color: #fac337;
    }

    .icon-balance_i,.icon-weixin-yunhuisuan {
      color: #64b42e;
    }

    .icon-balance_j,.icon-zhifubao-yunhuisuan {
      color: #069ce7;
    }

    .icon-balance_z {
      background-image: url(../../../assets/images/pay_e.png);
    }

    .iconfont {
      font-size: 2rem;
      margin-right: 0.625rem;
    }

    .icon-icon_heart2 {
      font-size: 1.35rem;
      color: #ef6a4d;
    }
  }

  li:last-child {
    border: none;
  }
}

.btn {
  width: 21.5625rem;
  margin: 1.25rem auto;
  height: 2.875rem;
  border-radius: 5rem;
  font-size: 16px;
  color: #fff;
  background: #f15353;
  border: none;
}

.withdrawal_box {
  h2 {
    background: #fff;
    line-height: 2.875rem;
    font-size: 16px;
    border-bottom: solid 0.0625rem #ebebeb;
    z-index: 10;

    .icon-close11 {
      width: 3rem;
      display: inline-block;
      position: absolute;
      right: 0;
      font-size: 1rem;
      color: #666;
    }
  }

  .recharge_way {
    background: #fff;

    li {
      position: relative;
      display: flex;
      align-items: center;
      line-height: 3.5rem;
      font-size: 16px;
      margin-left: 1.25rem;
      padding-right: 1.25rem;

      /* border-bottom: solid 0.0625rem #ebebeb; */
      span {
        font-size: 13px;
        color: #8c8c8c;
      }

      .iconfont_bg {
        background: #f15353;
        width: 2.25rem;
        height: 1.5rem;
        border-radius: 0.1875rem;
        display: flex;
        align-items: center;
        margin-right: 0.625rem;
      }

      .icon-balance_d {
        color: #00908c;
      }

      .icon-balance_e {
        color: #64b42e;
      }

      .icon-balance_f {
        color: #fac337;
      }

      .icon-balance_g {
        color: #00508e;
      }

      .icon-balance_h {
        color: #fac337;
      }

      .icon-balance_i {
        color: #64b42e;
      }

      .icon-balance_j {
        color: #069ce7;
      }

      .icon-balance_z {
        background-image: url(../../../assets/images/pay_e.png);
      }

      .iconfont {
        font-size: 2rem;
        margin-right: 0.625rem;
      }
    }
  }
}

.supportCode {
  width: 15.63rem;
  height: 16.56rem;
  background: #fff;
  border-radius: 0.94rem;
  padding: 2.25rem 2.5rem 3.69rem 2.5rem;
  box-sizing: border-box;

  .supportCodeBox {
    // margin: 0.94rem 0.88rem;
    box-sizing: border-box;
    border-radius: 0.63rem;
    border: 1px solid #dedede;

    img {
      border-radius: 0.63rem;
      width: 100%;
      height: 100%;
    }
  }

  .txt {
    margin-top: 0.84rem;
  }
}

.close {
  text-align: right;

  .iconfont {
    font-size: 2rem;
    color: #9f9f9f;
  }
}

.icon-pay_yue {
  color: #ff7433;
}

.icon-pay_wechat {
  color: #ff7433;
}

.icon-pay_alipay {
  color: #29a1f7;
}
</style>